<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="layouts/layout">
<head>
<title>Home</title>
</head>
<body>

	<th:block layout:fragment="content">

		<div class="container-wrapper">
			<div class="container">
				<div class="page-header">
					<h1>Cutomer</h1>

					<p class="lead">Customer Details:</p>
				</div>

				<form th:object="${order}" th:action="${flowExecutionUrl}" class="form-horizontal" method="POST">
					<input type="hidden" name="cartId" th:value="${order.cart.cartid}" class="form-control" /> 
					<h3>Basic Info:</h3>
						
					<div class="form-group">
						<label for="customerName">Name</label>
						<input type="text" th:field="*{cart.customer.customerName}" class="form-control" />
						<!-- <form:input path="cart.customer.customerName" id="name"
							class="form-control" /> -->
					</div>

					<div class="form-group">
						<label for="email">Email</label>
						<input type="text" th:field="*{cart.customer.customerEmail}" class="form-control" />
						<!-- <form:input path="cart.customer.customerEmail" id="email"
							class="form-control" /> -->
					</div>

					<div class="form-group">
						<label for="phone">Phone</label>
						<input type="text" th:field="*{cart.customer.customerPhone}" class="form-control" />
						<!-- <form:input path="cart.customer.customerPhone" id="phone"
							class="form-control" /> -->
					</div>

					<br />

					<h3>Billing Address:</h3>

					<div class="form-group">
						<label for="billingStreet">Street Name</label>
						<input type="text" th:field="*{cart.customer.billingAddress.streetname}" class="form-control" />
						<!-- <form:input path="cart.customer.billingAddress.streetname"
							id="billingStreet" class="form-control" /> -->
					</div>

					<div class="form-group">
						<label for="billingApartmentNumber">Apartment Number</label>
						<input type="text" th:field="*{cart.customer.billingAddress.apartmentnumber}" class="form-control" />
						<!-- <form:input path="cart.customer.billingAddress.apartmentnumber"
							id="billingApartmentNumber" class="form-control" /> -->
					</div>

					<div class="form-group">
						<label for="billingCity">City</label>
						<input type="text" th:field="*{cart.customer.billingAddress.city}" class="form-control" />
						<!-- <form:input path="cart.customer.billingAddress.city"
							id="billingCity" class="form-control" /> -->
					</div>

					<div class="form-group">
						<label for="billingState">State</label>
						<input type="text" th:field="*{cart.customer.billingAddress.state}" class="form-control" />
						<!-- <form:input path="cart.customer.billingAddress.state"
							id="billingState" class="form-control" /> -->
					</div>

					<div class="form-group">
						<label for="billingCountry">Country</label>
						<input type="text" th:field="*{cart.customer.billingAddress.country}" class="form-control" />
						<!-- <form:input path="cart.customer.billingAddress.country"
							id="billingCountry" class="form-control" /> -->
					</div>

					<div class="form-group">
						<label for="billingZip">Zipcode</label>
						<input type="text" th:field="*{cart.customer.billingAddress.zipcode}" class="form-control" />
						<!-- <form:input path="cart.customer.billingAddress.zipcode"
							id="billingZip" class="form-control" /> -->
					</div>

					<input type="hidden" name="_flowExecutionKey" />

					<br />
					<br />

					<input type="submit" value="Next" class="btn btn-default"
						name="_eventId_customerInfoCollected" />
						
					<input type="submit" value="Cancel" class="btn btn-default"
						name="_eventId_cancel" />
				</form>
			</div>
		</div>
	</th:block>

</body>
</html>